<template>
  <div style="display: flex;">
    <!--飞机-->
    <img src="../assets/plane/pics/1.png" id="ar_01" style="display: none;" alt="error">
    <!--车辆-->
    <img src="../assets/plane/pics/2.png" id="ar_02" style="display: none;" alt="error">
    <!--无人机-->
    <img src="../assets/plane/pics/3.png" id="ar_03" style="display: none;" alt="error">
    <!--导弹-->
    <img src="../assets/plane/pics/dd.png" id="ar_04" style="display: none;" alt="error">
    <div id="container">
      <canvas id="cas">
        暂时不支持
      </canvas>
    </div>
    <div>
      <div class="contro">
        <div style="margin-top: 20px;">
          <div style="font-weight: bolder;color: #337ab7;">添加目标节点</div>
          <div style="margin-top: 6px;">
            <button @click="t_feiji" class="contro_info">添加飞机</button>
          </div>
          <div style="margin-top: 6px;">
            <button @click="t_cheliang" class="contro_info">添加车辆</button>
          </div>
        </div>
        <div style="margin-top: 20px;">
          <div style="font-weight: bolder;color: fuchsia;">添加探测节点</div>
          <div style="margin-top: 6px;">
            <button @click="s_feiji" class="contro_info">添加飞机</button>
          </div>
          <div style="margin-top: 6px;">
            <button @click="s_wurenji" class="contro_info">添加无人机</button>
          </div>
          <div style="margin-top: 6px;">
            <button @click="s_daodan" class="contro_info">添加导弹</button>
          </div>
        </div>
        <div style="margin-top: 20px;">
          <button @click="downInfo">生成初始位置数据</button>
        </div>
        <div id="zbInfo" style="display:block;margin-left: 20px; margin-top: 6px;font-size: 8px;text-align: left;">
          <!--<span>实时坐标：</span>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {down} from '../utils/down.js'

var xv;
var yv;

var num01 = 1
// 飞机详情对象
var tFeijiObj = new Object()
//  飞机数量数组
var array01 = new Array()

// 当前页面域是否点击过下载按钮
var downFlag = false

/**
 *  当前飞机操作的型号：
 *      支持：01,02,03
 *          t_cheliang
 *          t_fenji
 * @type {string}
 */
var aircraftType

var cvs
var context

var tmpHeight;
var tmpWidth;

var num02 = 1
var planeObj02 = new Object()
var array02 = new Array()

//  目标节点-飞机
var tFeijiNum = 1
var tFeijiObj = new Object()
var tFeijiArray = new Array()

//  目标节点-车辆
var tCheliangNum = 1
var tCheliangObj = new Object()
var tCheliangArray = new Array()

// 探测节点-无人机
var sWurenjiNum = 1
var sWurenjiObj = new Object()
var sWurenjiArray = new Array()

// 探测节点-飞机
var sFeijiNum = 1
var sFeijiObj = new Object()
var sFeijiArray = new Array()

// 探测节点-导弹
var sDaodanNum = 1
var sDaodanObj = new Object()
var sDaodanArray = new Array()

export default {
  name: 'Home',
  mounted() {
    // https://blog.csdn.net/JINGinC/article/details/120926465
    // 【切记：箭头函数导致的 this 作用域问题】
    var _this = this;

    cvs = document.getElementById('cas');

    // 窗口尺寸
    tmpHeight = window.innerHeight - 5;
    tmpWidth = window.innerWidth / 5 * 4;

    // 设置画布大小
    cvs.height = tmpHeight;
    cvs.width = tmpWidth;

    // 比例尺换算
    yv = 221 / tmpHeight;
    xv = 510 / tmpWidth;

    context = cvs.getContext('2d');
    // 飞机移动事件
    cvs.onmousedown = function (e) {
      if (downFlag) {
        return
      }
      //1、获取飞机操作型号
      let type = aircraftType
      if ('t_feiji' === type) {
        _this.t_feiji_move(e)
      } else if ('t_cheliang' === type) {
        _this.t_cheliang_move(e)
      } else if ('s_wurenji' === type) {
        _this.s_wurenji_move(e)
      } else if ('s_feiji' === type) {
        _this.s_feiji_move(e)
      } else if ('s_daodan' === type) {
        _this.s_daodan_move(e)
      } else {
        console.warn('unsupport : ' + type)
      }
    }

    // 设置字体颜色
    context.fillStyle = "#ff0000";

    // 刷新被覆物体
    setInterval(function () {
      _this.t_feiji_all()
      _this.t_cheliang_all()
      _this.s_wurenji_all()
      _this.s_feiji_all()
      _this.s_daodan_all()
    }, 500)
  },
  methods: {
    /**
     * 加载图片方式1
     */
    /*var image = new  Image();
    image.src='1.png';
    // 动态创建图片时，必须在回调汇中加载， 基于dom则不需要。 dom元素优先于js加载
    image.onload = function (){
      context.drawImage(image,20,40);
    }*/
    /**
     * 加载图片方式2：
     * 使用dom操作，需要在整个dom元素加载完成才开始js， dom 中的图片需要进行隐藏
     */
    //window.onload = function() {
    /*var image = document.getElementById("imags");
    //context.drawImage(image,0,0);
    // 加载并压缩
    context.drawImage(image, 0, 0, 60, 60);*/
    //}

    t_feiji() {
      aircraftType = 't_feiji'
      if (downFlag) {
        return
      }
      tFeijiArray.push(tFeijiNum)
      var item = 'tFeiji_' + tFeijiNum
      tFeijiObj[item] = new Object()
      tFeijiObj[item].x0 = 0
      tFeijiObj[item].y0 = 15
      tFeijiObj[item].ysX = 40 // x轴压缩
      tFeijiObj[item].ysY = 40 // y轴压缩
      tFeijiObj[item].textX = tFeijiObj[item].x0 + 40 // 字体x轴坐标 （宽）
      tFeijiObj[item].textY = tFeijiObj[item].y0 // 字体y轴坐标（高）
      var image = document.getElementById('ar_01')
      var text = "t-" + tFeijiNum

      context.fillText(text, tFeijiObj[item].textX, tFeijiObj[item].textY)
      context.drawImage(image, tFeijiObj[item].x0, tFeijiObj[item].y0, tFeijiObj[item].ysX, tFeijiObj[item].ysY)
      var divRoot = document.getElementById('zbInfo')
      var zb = document.createElement('div')
      zb.innerText = 'T-FJ[' + sDaodanNum + ']坐标[' + tFeijiObj[item].x0 * xv + ',' + tFeijiObj[item].y0 * yv + ']'
      zb.id = 'fire_' + aircraftType + tFeijiNum
      divRoot.appendChild(zb)
      tFeijiNum++
    },
    t_feiji_move(e) {
      if (tFeijiArray.length > 0) {
        var current = tFeijiArray.length
        var item = 'tFeiji_' + current
        // 清除上一次轨迹 , 清除文字时，注意由字体宽度导致的清除失效
        context.clearRect(tFeijiObj[item].x0, tFeijiObj[item].y0 - 8, tFeijiObj[item].ysX + 40, tFeijiObj[item].ysY + 8)        // 保存当前轨迹
        tFeijiObj[item].x0 = e.clientX
        tFeijiObj[item].y0 = e.clientY

        tFeijiObj[item].textX = tFeijiObj[item].x0 + 40
        tFeijiObj[item].textY = tFeijiObj[item].y0

        // 当前飞机编号
        var text = "t-" + tFeijiArray.length
        //context.font = 'blod 1px 宋体';
        //context.strokeStyle = 'purple';
        context.fillText(text, tFeijiObj[item].textX, tFeijiObj[item].textY)

        var image = document.getElementById('ar_01')
        context.drawImage(image, tFeijiObj[item].x0, tFeijiObj[item].y0, tFeijiObj[item].ysX, tFeijiObj[item].ysY)
        var zb = document.getElementById('fire_' + aircraftType + tFeijiArray.length)
        zb.innerHTML = 'T-FJ[' + tFeijiArray.length + ']坐标[' + e.clientX * xv + ', ' + e.clientY * yv + ']'
      }
    },
    t_feiji_all() {
      for (let i = 0; i < tFeijiArray.length; i++) {
        var item = 'tFeiji_' + tFeijiArray[i]
        // 清除本次，重新画，避免字体颜色不断加深
        context.clearRect(tFeijiObj[item].x0, tFeijiObj[item].y0 - 8, tFeijiObj[item].ysX + 40, tFeijiObj[item].ysY + 8)        // 保存当前轨迹
        // 当前飞机编号
        var text = "t-" + tFeijiArray[i]
        context.fillText(text, tFeijiObj[item].textX, tFeijiObj[item].textY)
        var image = document.getElementById('ar_01')
        context.drawImage(image, tFeijiObj[item].x0, tFeijiObj[item].y0, tFeijiObj[item].ysX, tFeijiObj[item].ysY)
      }
    },
    t_cheliang() {
      aircraftType = 't_cheliang'
      if (downFlag) {
        return
      }
      tCheliangArray.push(tCheliangNum)
      var item = 'tCheliang_' + tCheliangNum
      tCheliangObj[item] = new Object()
      tCheliangObj[item].x0 = 0
      tCheliangObj[item].y0 = 15
      tCheliangObj[item].ysX = 40 // x轴压缩
      tCheliangObj[item].ysY = 40 // y轴压缩
      tCheliangObj[item].textX = tCheliangObj[item].x0 + 40 // 字体x轴坐标 （宽）
      tCheliangObj[item].textY = tCheliangObj[item].y0 // 字体y轴坐标（高）
      var image = document.getElementById('ar_02')
      var text = "t-" + tCheliangNum
      context.fillText(text, tCheliangObj[item].textX, tCheliangObj[item].textY)
      context.drawImage(image, tCheliangObj[item].x0, tCheliangObj[item].y0, tCheliangObj[item].ysX, tCheliangObj[item].ysY)
      var divRoot = document.getElementById('zbInfo')
      var zb = document.createElement('div')
      zb.innerText = 'T-CL[' + sDaodanNum + ']坐标[' + tCheliangObj[item].x0 * xv + ',' + tCheliangObj[item].y0 * yv + ']'
      zb.id = 'fire_' + aircraftType + tCheliangNum
      divRoot.appendChild(zb)
      tCheliangNum++
    },
    t_cheliang_move(e) {
      if (tCheliangArray.length > 0) {
        var current = tCheliangArray.length
        var item = 'tCheliang_' + current
        // 清除上一次轨迹 , 清除文字时，注意由字体宽度导致的清除失效
        context.clearRect(tCheliangObj[item].x0, tCheliangObj[item].y0 - 8, tCheliangObj[item].ysX + 40, tCheliangObj[item].ysY + 8)        // 保存当前轨迹
        tCheliangObj[item].x0 = e.clientX
        tCheliangObj[item].y0 = e.clientY

        tCheliangObj[item].textX = tCheliangObj[item].x0 + 40
        tCheliangObj[item].textY = tCheliangObj[item].y0

        // 当前飞机编号
        var text = "t-" + tCheliangArray.length
        //context.font = 'blod 1px 宋体';
        //context.strokeStyle = 'purple';
        context.fillText(text, tCheliangObj[item].textX, tCheliangObj[item].textY)

        var image = document.getElementById('ar_02')
        context.drawImage(image, tCheliangObj[item].x0, tCheliangObj[item].y0, tCheliangObj[item].ysX, tCheliangObj[item].ysY)
        var zb = document.getElementById('fire_' + aircraftType + tCheliangArray.length)
        zb.innerHTML = 'T-CL[' + tCheliangArray.length + ']坐标[' + e.clientX * xv + ', ' + e.clientY * yv + ']'
      }
    },
    t_cheliang_all() {
      for (let i = 0; i < tCheliangArray.length; i++) {
        var item = 'tCheliang_' + tCheliangArray[i]
        // 清除本次，重新画，避免字体颜色不断加深
        context.clearRect(tCheliangObj[item].x0, tCheliangObj[item].y0 - 8, tCheliangObj[item].ysX + 40, tCheliangObj[item].ysY + 8)        // 保存当前轨迹
        // 当前飞机编号
        var text = "t-" + tCheliangArray[i]
        context.fillText(text, tCheliangObj[item].textX, tCheliangObj[item].textY)
        var image = document.getElementById('ar_02')
        context.drawImage(image, tCheliangObj[item].x0, tCheliangObj[item].y0, tCheliangObj[item].ysX, tCheliangObj[item].ysY)
      }
    },
    s_wurenji() {
      aircraftType = 's_wurenji'
      if (downFlag) {
        return
      }
      sWurenjiArray.push(sWurenjiNum)
      var item = 'sWurenji_' + sWurenjiNum
      sWurenjiObj[item] = new Object()
      sWurenjiObj[item].x0 = tmpWidth - 50 // 左上角起始坐标
      sWurenjiObj[item].y0 = tmpHeight - 40
      sWurenjiObj[item].ysX = 40 // x轴压缩
      sWurenjiObj[item].ysY = 40 // y轴压缩
      sWurenjiObj[item].textX = sWurenjiObj[item].x0 + 40 // 字体x轴坐标 （宽）
      sWurenjiObj[item].textY = sWurenjiObj[item].y0 // 字体y轴坐标（高）
      var image = document.getElementById('ar_03')
      var text = "s-" + sWurenjiNum
      context.fillText(text, sWurenjiObj[item].textX, sWurenjiObj[item].textY)
      context.drawImage(image, sWurenjiObj[item].x0, sWurenjiObj[item].y0, sWurenjiObj[item].ysX, sWurenjiObj[item].ysY)
      var divRoot = document.getElementById('zbInfo')
      var zb = document.createElement('div')
      zb.innerText = 'S-WRJ[' + sDaodanNum + ']坐标[' + sWurenjiObj[item].x0 * xv + ',' + sWurenjiObj[item].y0 * yv + ']'
      zb.id = 'fire_' + aircraftType + sWurenjiNum
      divRoot.appendChild(zb)
      sWurenjiNum++
    },
    s_wurenji_move(e) {
      if (sWurenjiArray.length > 0) {
        var current = sWurenjiArray.length
        var item = 'sWurenji_' + current

        context.clearRect(sWurenjiObj[item].x0, sWurenjiObj[item].y0 - 8, sWurenjiObj[item].ysX + 40, sWurenjiObj[item].ysY + 8)        // 保存当前轨迹
        sWurenjiObj[item].x0 = e.clientX
        sWurenjiObj[item].y0 = e.clientY

        sWurenjiObj[item].textX = sWurenjiObj[item].x0 + 40
        sWurenjiObj[item].textY = sWurenjiObj[item].y0

        // 当前飞机编号
        var text = "s-" + sWurenjiArray.length
        //context.font = 'blod 1px 宋体';
        //context.strokeStyle = 'purple';
        context.fillText(text, sWurenjiObj[item].textX, sWurenjiObj[item].textY)

        var image = document.getElementById('ar_03')
        context.drawImage(image, sWurenjiObj[item].x0, sWurenjiObj[item].y0, sWurenjiObj[item].ysX, sWurenjiObj[item].ysY)
        var zb = document.getElementById('fire_' + aircraftType + sWurenjiArray.length)
        zb.innerHTML = 'S-WRJ[' + sWurenjiArray.length + ']坐标[' + e.clientX * xv + ', ' + e.clientY * yv + ']'
      }
    },
    s_wurenji_all() {
      for (let i = 0; i < sWurenjiArray.length; i++) {
        var item = 'sWurenji_' + sWurenjiArray[i]
        // 清除本次，重新画，避免字体颜色不断加深
        context.clearRect(sWurenjiObj[item].x0, sWurenjiObj[item].y0 - 8, sWurenjiObj[item].ysX + 40, sWurenjiObj[item].ysY + 8)
        // 当前飞机编号
        var text = "s-" + sWurenjiArray[i]
        context.fillText(text, sWurenjiObj[item].textX, sWurenjiObj[item].textY)
        var image = document.getElementById('ar_03')
        context.drawImage(image, sWurenjiObj[item].x0, sWurenjiObj[item].y0, sWurenjiObj[item].ysX, sWurenjiObj[item].ysY)
      }
    },
    s_feiji() {
      aircraftType = 's_feiji'
      if (downFlag) {
        return
      }
      sFeijiArray.push(sFeijiNum)
      var item = 'sFeiji_' + sFeijiNum
      sFeijiObj[item] = new Object()
      sFeijiObj[item].x0 = tmpWidth - 50 // 左上角起始坐标
      sFeijiObj[item].y0 = tmpHeight - 40
      sFeijiObj[item].ysX = 40 // x轴压缩
      sFeijiObj[item].ysY = 40 // y轴压缩
      sFeijiObj[item].textX = sFeijiObj[item].x0 + 40 // 字体x轴坐标 （宽）
      sFeijiObj[item].textY = sFeijiObj[item].y0 // 字体y轴坐标（高）
      var image = document.getElementById('ar_01')
      var text = "s-" + sFeijiNum
      context.fillText(text, sFeijiObj[item].textX, sFeijiObj[item].textY)
      context.drawImage(image, sFeijiObj[item].x0, sFeijiObj[item].y0, sFeijiObj[item].ysX, sFeijiObj[item].ysY)
      var divRoot = document.getElementById('zbInfo')
      var zb = document.createElement('div')
      zb.innerText = 'S-FJ[' + sDaodanNum + ']坐标[' + sFeijiObj[item].x0 * xv + ',' + sFeijiObj[item].y0 * yv + ']'
      zb.id = 'fire_' + aircraftType + sFeijiNum
      divRoot.appendChild(zb)
      sFeijiNum++
    },
    s_feiji_move(e) {
      if (sFeijiArray.length > 0) {
        var current = sFeijiArray.length
        var item = 'sFeiji_' + current

        context.clearRect(sFeijiObj[item].x0, sFeijiObj[item].y0 - 8, sFeijiObj[item].ysX + 40, sFeijiObj[item].ysY + 8)        // 保存当前轨迹
        sFeijiObj[item].x0 = e.clientX
        sFeijiObj[item].y0 = e.clientY

        sFeijiObj[item].textX = sFeijiObj[item].x0 + 40
        sFeijiObj[item].textY = sFeijiObj[item].y0

        // 当前飞机编号
        var text = "s-" + sFeijiArray.length
        //context.font = 'blod 1px 宋体';
        //context.strokeStyle = 'purple';
        context.fillText(text, sFeijiObj[item].textX, sFeijiObj[item].textY)

        var image = document.getElementById('ar_01')
        context.drawImage(image, sFeijiObj[item].x0, sFeijiObj[item].y0, sFeijiObj[item].ysX, sFeijiObj[item].ysY)
        var zb = document.getElementById('fire_' + aircraftType + sFeijiArray.length)
        zb.innerHTML = 'S-FJ[' + sFeijiArray.length + ']坐标[' + e.clientX * xv + ', ' + e.clientY * yv + ']'
      }
    },
    s_feiji_all() {
      for (let i = 0; i < sFeijiArray.length; i++) {
        var item = 'sFeiji_' + sFeijiArray[i]
        // 清除本次，重新画，避免字体颜色不断加深
        context.clearRect(sFeijiObj[item].x0, sFeijiObj[item].y0 - 8, sFeijiObj[item].ysX + 40, sFeijiObj[item].ysY + 8)
        // 当前飞机编号
        var text = "s-" + sFeijiArray[i]
        context.fillText(text, sFeijiObj[item].textX, sFeijiObj[item].textY)
        var image = document.getElementById('ar_01')
        context.drawImage(image, sFeijiObj[item].x0, sFeijiObj[item].y0, sFeijiObj[item].ysX, sFeijiObj[item].ysY)
      }
    },
    s_daodan() {
      aircraftType = 's_daodan'
      if (downFlag) {
        return
      }
      console.info("width: " + tmpWidth + " Height" + tmpHeight)
      sDaodanArray.push(sDaodanNum)
      var item = 'sDaodan_' + sDaodanNum
      sDaodanObj[item] = new Object()
      sDaodanObj[item].x0 = tmpWidth - 50 // 左上角起始坐标
      sDaodanObj[item].y0 = tmpHeight - 40
      sDaodanObj[item].ysX = 40 // x轴压缩
      sDaodanObj[item].ysY = 40 // y轴压缩
      sDaodanObj[item].textX = sDaodanObj[item].x0 + 40 // 字体x轴坐标 （宽）
      sDaodanObj[item].textY = sDaodanObj[item].y0 // 字体y轴坐标（高）
      var image = document.getElementById('ar_04')
      var text = "s-" + sDaodanNum
      context.fillText(text, sDaodanObj[item].textX, sDaodanObj[item].textY)
      context.drawImage(image, sDaodanObj[item].x0, sDaodanObj[item].y0, sDaodanObj[item].ysX, sDaodanObj[item].ysY)
      var divRoot = document.getElementById('zbInfo')
      var zb = document.createElement('div')
      zb.innerText = 'S-DD[' + sDaodanNum + ']坐标[' + sDaodanObj[item].x0 * xv + ',' + sDaodanObj[item].y0 * yv + ']'
      zb.id = 'fire_' + aircraftType + sDaodanNum
      divRoot.appendChild(zb)
      sDaodanNum++
    },
    s_daodan_move(e) {
      if (sDaodanArray.length > 0) {
        var current = sDaodanArray.length
        var item = 'sDaodan_' + current

        context.clearRect(sDaodanObj[item].x0, sDaodanObj[item].y0 - 8, sDaodanObj[item].ysX + 40, sDaodanObj[item].ysY + 8)        // 保存当前轨迹
        sDaodanObj[item].x0 = e.clientX
        sDaodanObj[item].y0 = e.clientY

        // 计算当前汉字位置：
        // 1、飞机坐标+压缩率+字体宽度
        sDaodanObj[item].textX = sDaodanObj[item].x0 + 40
        sDaodanObj[item].textY = sDaodanObj[item].y0

        // 当前飞机编号
        var text = "s-" + sDaodanArray.length
        //context.font = 'blod 1px 宋体';
        //context.strokeStyle = 'purple';
        context.fillText(text, sDaodanObj[item].textX, sDaodanObj[item].textY)

        var image = document.getElementById('ar_04')
        context.drawImage(image, sDaodanObj[item].x0, sDaodanObj[item].y0, sDaodanObj[item].ysX, sDaodanObj[item].ysY)
        var zb = document.getElementById('fire_' + aircraftType + sDaodanArray.length)
        zb.innerHTML = 'S-DD[' + sDaodanArray.length + ']坐标[' + e.clientX * xv + ', ' + e.clientY * yv + ']'
      }
    },
    s_daodan_all() {
      for (let i = 0; i < sDaodanArray.length; i++) {
        var item = 'sDaodan_' + sDaodanArray[i]
        var obj = sDaodanObj[item]
        // 清除本次，重新画，避免字体颜色不断加深
        context.clearRect(sDaodanObj[item].x0, sDaodanObj[item].y0 - 8, sDaodanObj[item].ysX + 40, sDaodanObj[item].ysY + 8)
        // 当前飞机编号
        var text = "s-" + sDaodanArray[i]
        context.fillText(text, sDaodanObj[item].textX, sDaodanObj[item].textY)
        var image = document.getElementById('ar_04')
        context.drawImage(image, sDaodanObj[item].x0, sDaodanObj[item].y0, sDaodanObj[item].ysX, sDaodanObj[item].ysY)
      }
    },
    downInfo() {
      downFlag = true
      //var info = new Object()
      // 将对象合并到 info 中
      //info = Object.assign(info, tFeijiObj, planeObj02, sWurenjiObj)
      var dataList = new Array()

      if (tFeijiArray.length > 0) {
        for (var i = 1; i <= tFeijiArray.length; i++) {
          var obj = tFeijiObj['tFeiji_' + i]
          var tmp = new Object()
          tmp.planeType = 'T-FJ'
          tmp.planeNum = 'T-FJ' + i,
            tmp.jd = obj.x0 * xv;
          tmp.wd = obj.y0 * yv;
          dataList.push(tmp)
        }
      }

      if (tCheliangArray.length > 0) {
        for (var i = 1; i <= tCheliangArray.length; i++) {
          var obj = tCheliangObj['tCheliang_' + i]
          var tmp = new Object()
          tmp.planeType = 'T-CL'
          tmp.planeNum = 'T-CL' + i,
            tmp.jd = obj.x0 * xv;
          tmp.wd = obj.y0 * yv;
          dataList.push(tmp)
        }
      }

      if (sWurenjiArray.length > 0) {
        for (var i = 1; i <= sWurenjiArray.length; i++) {
          var obj = sWurenjiObj['sWurenji_' + i]
          var tmp = new Object()
          tmp.planeType = 'S-WRJ'
          tmp.planeNum = 'S-WRJ' + i,
            tmp.jd = obj.x0 * xv;
          tmp.wd = obj.y0 * yv;
          dataList.push(tmp)
        }
      }

      if (sFeijiArray.length > 0) {
        for (var i = 1; i <= sFeijiArray.length; i++) {
          var obj = sFeijiObj['sFeiji_' + i]
          var tmp = new Object()
          tmp.planeType = 'S-FJ'
          tmp.planeNum = 'S-FJ' + i,
            tmp.jd = obj.x0 * xv;
          tmp.wd = obj.y0 * yv;
          dataList.push(tmp)
        }
      }

      if (sDaodanArray.length > 0) {
        for (var i = 1; i <= sDaodanArray.length; i++) {
          var obj = sDaodanObj['sDaodan_' + i]
          var tmp = new Object()
          tmp.planeType = 'S-DD'
          tmp.planeNum = 'S-DD' + i,
            tmp.jd = obj.x0 * xv;
          tmp.wd = obj.y0 * yv;
          dataList.push(tmp)
        }
      }
      down(dataList)
    }
  }
}
</script>

<style scoped>
#container {
  background-image: url("../assets/plane/pics/map.jpg");
  background-size: 100% 100%;
}

.contro {
  /*渐变色*/
  /*background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(83, 175, 8, 0.9));*/
  margin-left: 10px;
  /* border: solid 1px red;*/
}

.contro_area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  margin-top: 10px;
}

.contro_info {
  text-decoration-line: none;
  color: black;
  font-size: 8px;
  /*font-weight: bold;*/
  font-family: '微软雅黑', emoji;
}
</style>
